<template>
  <div class="wrapper">
    <img class="logo" src="../assets/logo.png"/>
    <el-form class="form" ref="loginForm" :model="loginForm" label-width="80px" :rules="rules">

      <el-form-item label="账号" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" placeholder="请输入密码" type='password'></el-input>
      </el-form-item>

      <el-form-item label=" ">
        <el-button type="primary" @click="login('loginForm')">登录</el-button>
        <el-button @click="reset('loginForm')">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
  export default{
    name: '',
    data(){
      return {
        loginForm:{
          username:'',
          password:'',
        },
        rules:{

        }
      }
    },
    methods: {
      login(form){
        this.$http({
          method: 'post',
          url: 'log/login',
          data: this.loginForm
        }).then((res)=>{
          res = res.data;
          let data = res.object;
          if(res.status == 'SUCCESS'){
            if(data.type == '0' || data.type == '1' || data.type == '2'){
              sessionStorage.setItem('username',data.nickname);
              sessionStorage.setItem('logTime',data.logTime);
              sessionStorage.setItem('type',data.type);
              this.$router.push('index');
            }else{
              this.$message({
                type:'error',
                message:'您无权限登录后台系统',
              });
            }
          }else{
            this.$message({
              type:'error',
              message:'登录失败',
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:'登录失败',
          });
        })
      },
      reset(form){
        this.$refs[form].resetFields();
      }
    },
  }
</script>
<style scoped>
  .wrapper{
    display: inline-block;
    position: absolute;
    border: 1px solid #ebeaea;
    border-radius: 0.5em;
    padding: 5em;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 25%;
    box-shadow: 5px 5px 12px rgba(132, 119, 119, 0.32);
    /*top:0;*/
    /*bottom:0;*/
    /*left:0;*/
    /*right:0;*/
    /*margin: auto;*/
    /*width:30%;*/
    /*height:40%;*/
    /*display:table;*/
    /*text-align: center;*/
  }
  .logo{
    width: 11em;

    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,-50%);
  }
  .form{
    /*text-align: left;*/
    /*display:table-cell;*/
    /*vertical-align: center;*/
  }
</style>